import React, { Component } from "react";
import {Table,Tag,Button} from 'antd';
import axios from 'axios';
import {DeleteOutlined,EditOutlined } from '@ant-design/icons'; 
class RoleList extends Component{
    state={
        dataSource:[],
        columns:[
            {
              title: 'ID',
              dataIndex: 'id',
              key: 'id',
              render:(id)=>{
                return <b>{id}</b>
              }
            },
            {
              title: '权限名称',
              dataIndex: 'label',
              key: 'label',
              
            },
            {
              title: '权限路径',
              dataIndex: 'key',
              key: 'key',
              render:(key)=>{
                return <Tag color='volcano'>{key}</Tag>
              } 
            },
            {
                title: '操作',
                key: 'key',
                render:(item)=>{
                    return <div>
                     <Button 
                     danger 
                     shape="circle" 
                     icon={<DeleteOutlined />}
                     style={{margin:'10px'}}
                     onClick={()=>this.confirm(item)}
                     />
                     
                     <Button 
                     type='primary' 
                     shape="circle" 
                     icon={<EditOutlined />} 
                     style={{margin:'10px'}} />
                    </div>
                } 
              },
          ]
    }
    componentDidMount(){
        axios.get('http://localhost:8000/posts').then(res=>
        this.setState({
            dataSource:res.data
        })
        )
    }
    render(){
        const {dataSource,columns}=this.state;
        return (
         <>
         <div>
            <Table dataSource={dataSource} columns={columns}></Table>
         </div>
        </>
        )
    }
}
export default RoleList;